<template>
    <el-table :data="tableData" height="250" style="width: 100%" v-loading="loading">
        <el-table-column label="产品图片" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <img :src="scope.row.imageUrl" shape="square" width="100" height="40" @error="errorpj" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column prop="description" label="产品描述" />
        <el-table-column prop="price" label="价格(元)" />
        <el-table-column prop="inventory" label="库存" />
        <el-table-column prop="address" label="操作">
            <template #default="scope">
                <el-button style="background-color: #05a000;color: #fff;" @click="Charge(scope.row.product_id)">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>充值</span>
                </el-button>
            </template>
        </el-table-column>

    </el-table>
</template>




<script setup>



import { ref, onMounted } from "vue"
import *as api from "../../../../api/vip.js"
import { useRouter } from "vue-router"

let router = useRouter()

//定义tableData
let tableData = ref([])

//定义加载动画
let loading = ref(true)


//充值逻辑
let Charge = async (id) => {
    router.push({
        name: 'pre_order',
        query: {
            id: id
        }
    })
    // try {
    //     let res = await api.addOrder(id)
    //     console.log(res);
    // } catch (error) {
    //     console.log(error);
    // }

}

let getList = async () => {
    try {
        loading.value = true
        let res = await api.getVipProducts()
        loading.value = false
        console.log(res, "lll");
        tableData.value = res.data.data
    } catch (error) {
        loading.value = false
    }
}

onMounted(() => {
    getList()
})



</script>
<script>
export default {
    meta: {
        title: 'vipCharge', name: 'vip充值', icon: 'icon-chongzhi'
    }
}
</script>